<template>
  <div>
    <el-table
      :data="buildList"
      style="width: 100%"
      class="area_table"
      ref="areaTable"
      highlight-current-row
      border
      height="313"
    >
      <el-table-column type="index" label="序号" width="150" align="center">
      </el-table-column>
      <el-table-column
        label="人员信息"
        width="200"
        align="center"
        property="name"
      ></el-table-column>
      <el-table-column
        label="第一周核酸检测"
        width="200"
        align="center"
        property="first"
      >
        <template slot-scope="scope">
          <el-button :type="scope.row.first ? 'success' : 'danger'">{{
            scope.row.first ? "已做" : "未做"
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="第二周核酸检测"
        width="200"
        align="center"
        property="second"
      >
        <template slot-scope="scope">
          <el-button :type="scope.row.second ? 'success' : 'danger'">{{
            scope.row.second ? "已做" : "未做"
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="第三周核酸检测"
        width="200"
        align="center"
        property="third"
      >
        <template slot-scope="scope">
          <el-button :type="scope.row.third ? 'success' : 'danger'">{{
            scope.row.third ? "已做" : "未做"
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="第四周核酸检测"
        width="200"
        align="center"
        property="fourth"
      >
        <template slot-scope="scope">
          <el-button :type="scope.row.fourth ? 'success' : 'danger'">{{
            scope.row.fourth ? "已做" : "未做"
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleUpdate(scope.$index, scope.row)"
            >更 改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentPage"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 弹窗 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="fromsubmit">
        <el-form-item label="核酸更改" prop="form">
          <br />
          <el-checkbox-group v-model="form.first">
            <el-checkbox label="第一周" name="first"></el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-model="form.second">
            <el-checkbox label="第二周" name="second"></el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-model="form.third">
            <el-checkbox label="第三周" name="third"></el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-model="form.fourth">
            <el-checkbox label="第四周" name="fourth"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleTrue('fromsubmit')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import buildApi from "@/api/build";
import cellApi from "@/api/cell";
export default {
  data() {
    return {
      dialogFormVisible: false,
      node: {
        _id: "",
        first: Boolean,
        second: Boolean,
        third: Boolean,
        fourth: Boolean,
      },
      form: {
        first: Boolean,
        second: Boolean,
        third: Boolean,
        fourth: Boolean,
      },
      currentPage: 1, //当前页
      size: 5, //当前页条数
      total: 0, //总条数
      buildList: [],
      objOptions: [
        { type: "first", name: "第一周" },
        { type: "second", name: "第二周" },
        { type: "third", name: "第三周" },
        { type: "fourth", name: "第四周" },
      ],
    };
  },

  components: {},
  mounted() {
    // this.condition();
    this.getCell();
    // this.on()
  },
  methods: {
    // 获取用户信息
    // 获取分页信息
    getCell() {
      cellApi.getUserList().then((response) => {
        const res = response.data;
        if (res.status == 0) {
          buildApi.getList().then((user) => {
            const list = user.data;
            if (list.status == 0) {
              // console.log(res.data); //用户列表数量
              // console.log("list", list.data); //核酸列表数量
              const userList = res.data;
              const arr = list.data;
              if (list.data.length == 0) {
                res.data.map((a) => {
                  buildApi.addName(a.username);
                });
              } else if (userList.length !== arr.length) {
                for (let i = arr.length; i < userList.length; i++) {
                  buildApi.addName(userList[i].username);
                }
              }
              this.condition();
            }
          });
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    // 获取分页信息
    condition() {
      buildApi.getBuild(this.currentPage, this.size).then((response) => {
        const res = response.data;
        // console.log(res);
        if (res.status == 0) {
          this.total = res.data.total;
          this.buildList = res.data.data;
          if (this.areaList == 0) {
            this.currentPage = this.currentPage - 1;
            this.condition();
          }
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    // 改变当前页位置
    handleCurrentPage(currentPage) {
      this.currentPage = currentPage;
      // console.log(currentPage);
      this.condition();
    },
    // 每页条数
    handleSizeChange(size) {
      // console.log(size);
      this.size = size;
      this.condition();
    },
    // 自带函数获取当前点击行，获取两个参数，一个当前点击的一个为上一次点击的行
    // handleCurrentChange(val) {
    //   // console.log(val);
    //   this.areaChange = val;
    //   //   console.log(this.areaChange._id);
    // },
    // 更新数据
    async handleUpdate(index, row) {
      // console.log(row);
      this.node._id = row._id;
       const response =  await buildApi.findOne(row._id)
        const res = response.data;
        if (res.status == 0) {
          // console.log(res);
          for (let key in this.form) {
            this.form[key] = res.data[key];
          }
        }
      this.dialogFormVisible = true;
    },
    // 确定按钮
    handleTrue(fromName) {
      // console.log(this.form);
      for (let key in this.form) {
        this.node[key] = this.form[key];
      }
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          buildApi.update(this.node).then((response) => {
            const res = response.data;
            if (res.status == 0) {
              this.$message({
                message: res.msg,
                type: "success",
              });
            } else {
              this.$message({
                message: res.msg,
                type: "waring",
              });
            }
          });
          this.condition();
          this.dialogFormVisible = false;
        }
      });
    },
  },
};
</script>

<style scoped></style>